<template>
  <div class="project-file">
    <el-scrollbar>
      <ul class="scheme-file-list" v-if="file.length">
        <li v-for="(item, index) in file" :key="'file_' + index">
          <div class="item-name">
            <span class="img"> <SvgIcon name="wendang" /></span>
            <p>
              <span class="tit">{{ item.originalFileName }}</span>
            </p>
          </div>
          <div class="item-options">
            <span
              @click="
                () => {
                  downHandler(item);
                }
              "
              >下载
            </span>
            <span
              @click="
                () => {
                  delPlanFn(item);
                }
              "
              >删除
            </span>
          </div>
        </li>
      </ul>
      <div v-else>
        <el-empty />
      </div>
      <div class="upload"><el-button type="primary" @click="addProjectAnnexFn"> 上传附件</el-button></div>
    </el-scrollbar>
  </div>
  <div v-if="drawerVisible">
    <Dialog v-model:drawerVisible="drawerVisible" v-model:config="config" :project-id="projectId" @change="refresh" />
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, inject } from "vue";
import Dialog from "../../components/Dialog.vue";
const projectId = inject("projectId");
import { PROJECT } from "@/constants";
import { downFiles } from "@/utils";
// const urlResource = window?.staticConfig.urlResource;
// hooks
import { useHandleData } from "@/hooks/useHandleData";
import { useDict } from "@/hooks/useDict";
const { getDict } = useDict(["projectFileType"]);
// api
import { getProjectFilesPage, addProjectFile, deleteFiles } from "@/api/modules/project";
import { downloadFile } from "@/api/modules/sys";
// 变量
const file = ref([]);
let params = ref({
  currentPage: 1,
  pageSize: 500,
  projectId
});
let drawerVisible = ref(false);
let config = ref<any>({
  width: 24
});
// 方法
const getProjectFilesPageFn = async () => {
  try {
    const { data } = await getProjectFilesPage(params.value);
    file.value = data.records || [];
    console.log(data);
  } catch (e) {
    console.log(e);
  }
};
const delPlanFn = async item => {
  await useHandleData(deleteFiles, { id: item.id }, `删除【${item.originalFileName}】`);
  refresh();
};
const addProjectAnnexFn = () => {
  drawerVisible.value = true;
  drawerVisible.value = true;
  config.value.title = "添加项目附件文件";
  config.value.form = {
    formData: {
      projectId,
      typeId: "",
      file: ""
    },
    rules: {
      typeId: [{ required: true, message: "请选择项目文件类型" }],
      file: [{ required: true, message: "请上传项目文件" }]
    }
  };
  config.value.column = [
    {
      type: "select",
      key: "typeId",
      formItemAttribute: {
        label: "项目文件类型"
      },
      attributes: {
        placeholder: "请选择项目文件类型",
        options: getDict("projectFileType"),
        multiple: false,
        filterable: true,
        clearable: true
      }
    },
    {
      type: "file",
      key: "file",
      formItemAttribute: {
        label: "上传项目文件"
      },
      attributes: {
        "prefix-data": PROJECT,
        multiple: false,
        showFileList: true,
        limit: 1,
        change: data => {
          config.value.form.formData.fileCopy = data;
        }
      }
    }
  ];
  config.value.api = addProjectFile;
  config.value.transformData = data => {
    data.name = data.fileCopy[0].name;
    data.path = data.fileCopy[0].path;
    data.originalFileName = data.fileCopy[0].originalFileName;
    delete data.file;
    delete data.fileCopy;
    return data;
  };
  config.value.message = "添加成功";
};
const refresh = () => {
  getProjectFilesPageFn();
};
const downHandler = async data => {
  downFiles(await downloadFile(data.previewLink), data.originalFileName);
};
onMounted(() => {
  getProjectFilesPageFn();
});
</script>
<style lang="scss" scoped>
.project-file {
  .scheme-file-list {
    box-sizing: border-box;
    display: flex;
    flex: 1;
    flex-flow: column nowrap;
    margin: 0 30px;
    li {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 36px;
      padding: 8px 10px;
      border-radius: 4px;
      .item-name {
        display: flex;
        flex: 1;
        width: max-content;
        overflow: hidden;
        .img {
          display: flex;
          flex: 0 0 24px;
          align-items: center;
          height: 24px;
          margin-right: 10px;
        }
        .tit {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .item-options {
        display: flex;
        flex: 0 0 60px;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        color: #7499f8;
        span {
          cursor: pointer;
        }
      }
      p {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      &:hover {
        background: #f4f4f4;
      }
    }
  }
  .upload {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    margin-right: 30px;
  }
}
</style>
